<!--
  - Copyright (c) 2019.  武汉中科图灵科技有限公司
  - Date :  2019/11/22
  - Author ：F12 Console=> atob("MzMxNDkxODAwQHFxLmNvbQ==")
  - Version ：1.9.0
  -->

<template>
  <div class="statisticAnly">
    <div class="abstatic-height"></div>
    <!-- style="display: none;" -->

    <!-- 边框组件 -->
    <div class="app-container" style="display: flex;">
      <div class="exceptionRecord_main_left">
        <div class="filter-wrap" style="margin-bottom: 10px;">
          <el-radio v-model="radio" label="1" @change="toggleTime('1')"
            >固定时间</el-radio
          >
          <el-radio-group
            v-model="listDate.tag"
            :disabled="radio === '1' ? false : true"
            size="mini"
            @change="changeDate"
          >
            <el-radio-button label="0">今天</el-radio-button>
            <el-radio-button label="1">昨天</el-radio-button>
            <el-radio-button label="2">最近7天</el-radio-button>
            <el-radio-button label="3">最近30天</el-radio-button>
          </el-radio-group>
          <el-button
            type="primary"
            style="margin-left: 30px"
            size="mini"
            @click="handleFilter"
            >确定</el-button
          >
        </div>
        <div class="filter-wrap" style="margin-bottom: 10px;">
          <el-radio v-model="radio" label="2" @change="toggleTime('2')"
            >自定义时间</el-radio
          >
          <el-date-picker
            size="mini"
            :picker-options="pickerBeginDateBefore"
            :disabled="radio === '2' ? false : true"
            v-model="listDate.dateStrs"
            value-format="yyyy-MM-dd"
            type="daterange"
            range-separator="—"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
          ></el-date-picker>
        </div>
        <border-warp width-auto>
          <div class="exceptionRecord_main_left_table">
            <el-main
              style="height: 100%; text-align: left; overflow: auto"
              class="anly-main"
            >
              <div class="anly-main-wrap">
                <div class="wrap-with-halfboder"></div>
                <el-row>
                  <div class="list anly-main-chart">
                    <span class="title" style="padding: 0;">隐患变化趋势</span>
                    <div
                      style="width: 100%; height: 147px;"
                      id="table_two"
                      ref="tabletwo"
                    ></div>
                  </div>
                </el-row>
                <div class="filter-result-wraplist">
                  <el-row :gutter="20">
                    <el-col :span="12">
                      <div class="filter-result-left">
                        <div class="list">
                          <span class="title">报警TOP10</span>
                          <div class="table_three">
                            <border-warp widthAuto>
                              <el-table :data="list" style="width: 100%">
                                <el-table-column label="排名">
                                  <template slot-scope="scope">
                                    <span style="color: #2bdef5"
                                      >NO.{{ scope.row.id }}</span
                                    >
                                  </template>
                                </el-table-column>
                                <el-table-column label="建筑名">
                                  <template slot-scope="scope">
                                    <span>{{ scope.row.name }}</span>
                                  </template>
                                </el-table-column>
                                <el-table-column prop="time" label="次数">
                                  <template slot-scope="scope">
                                    <span>{{ scope.row.count }}</span>
                                  </template>
                                </el-table-column>
                              </el-table>
                            </border-warp>
                          </div>
                        </div>
                      </div>
                    </el-col>
                    <el-col :span="12">
                      <div class="filter-result-right">
                        <div class="list">
                          <span class="title">故障TOP10</span>
                          <div class="table_three">
                            <border-warp widthAuto>
                              <el-table :data="slist" style="width: 100%">
                                <el-table-column label="排名">
                                  <template slot-scope="scope">
                                    <span style="color: #2bdef5"
                                      >NO.{{ scope.row.id }}</span
                                    >
                                  </template>
                                </el-table-column>
                                <el-table-column label="建筑名">
                                  <template slot-scope="scope">
                                    <span>{{ scope.row.name }}</span>
                                  </template>
                                </el-table-column>
                                <el-table-column prop="time" label="次数">
                                  <template slot-scope="scope">
                                    <span>{{ scope.row.count }}</span>
                                  </template>
                                </el-table-column>
                              </el-table>
                            </border-warp>
                          </div>
                        </div>
                      </div>
                    </el-col>
                  </el-row>
                </div>
              </div>
            </el-main>
          </div>
        </border-warp>
      </div>
      <div class="borderContent">
        <div class="borderContent_type">
          <title-warp :title="'隐患处理情况'">
            <div class="border_message">
              <div
                style="width: 384px; height: 187px;"
                id="handle_defect"
                ref="tabledefect"
              ></div>
            </div>
          </title-warp>
        </div>

        <div class="borderContent_bottom">
          <border-warp :title="'隐患类型分布'">
            <div class="border_message">
              <div
                style="width: 384px; height: 167px;"
                id="table_one"
                ref="tableone"
              ></div>
            </div>
          </border-warp>
        </div>
        <br />
      </div>
    </div>

    <!-- 底部导航 -->
    <bottom-nav
      :active="2"
      :routeData="$route.params.id"
      :routeMatched="$route.matched[0].path"
    ></bottom-nav>
  </div>
</template>
<script>
import echarts from "echarts";
import BottomNav from "@/components/BottomNav";
import {
  getDefect,
  CountByType,
  CountByMonth,
  selectCountByBuild
} from "@/api/device/statisticAnly/index";
export default {
  components: {
    BottomNav
  },
  data() {
    return {
      value: "",
      radio: "1",
      list: [],
      slist: [],
      typeList: [],
      type: "",
      time: "",
      pickerBeginDateBefore: {
        disabledDate: time => {
          // let _now = Date.now();
          // let _nowbefore30day = new Date(_now - 1000 * 60 * 60 * 24 * 30);
          // return time.getTime() > _now||time.getTime()<_nowbefore30day.getTime();
          return time.getTime() > Date.now() - 8.64e6;
        }
      },
      listDate: {
        dateStrs: null,
        tag: "0",
        channelId: null
      },
      params: {
        channelId: ""
      },
      isnonetype: false,
      isnonetime: false
    };
  },
  mounted() {
    this.fetchData();
  },
  watch: {
    $route: "fetchData"
  },
  methods: {
    fetchData() {
      let vm = this;
      vm.params.channelId = vm.$route.params.id;
      vm.toggleTime("1");
      vm.buildCount();
      vm.initChart1();
      vm.initChart2();
      vm.handleDefectChart();
    },
    handleDefectChart() {
      let dateStrs;
      if (this.listDate.dateStrs) {
        dateStrs = this.listDate.dateStrs.toString();
      }
      getDefect(
        Object.assign({}, this.listDate, this.params, { dateStrs: dateStrs })
      ).then(res => {
        this.isnonetime = res.data.length === 0;
        let ayarr = [
          { value: res.data.callCount, name: "未处理" },
          { value: res.data.handleCount, name: "已处理" }
        ];
        let stringarr = ["未处理", "已处理"];
        var handleChart = echarts.init(this.$refs.tabledefect);
        var option = {
          tooltip: {
            trigger: "item",
            formatter: "{b} ({d}%)"
          },
          legend: {
            show: false,
            orient: "vertical",
            icon: "circle",
            right: "10",
            top: "center",
            textStyle: {
              color: "rgba(80, 227, 194, 0.7)"
            },
            data: stringarr,
            color: ["#F4D16C", "#0278FC"]
          },
          series: [
            {
              name: "",
              type: "pie",
              radius: "70%",
              center: ["50%", "50%"],
              data: ayarr,
              color: ["#F4D16C", "#0278FC"],
              label: {
                show: true,
                formatter: "{b}\n\n {c}个   ({d}%)"
              }
            },
            {
              type: "pie",
              radius: "70%",
              center: ["50%", "50%"],
              data: ayarr,
              color: ["#F4D16C", "#0278FC"],
              itemStyle: {
                normal: {
                  label: {
                    show: false,
                    position: "inner",
                    formatter: "{d}%",
                    textStyle: {
                      color: "#ffffff"
                    }
                  }
                },
                emphasis: {
                  shadowBlur: 10,
                  shadowOffsetX: 0,
                  shadowColor: "rgba(0, 0, 0, 0.5)"
                }
              }
            }
          ]
        };
        handleChart.setOption(option);
      });
    },
    changeDate(day) {
      let dnum = 30;
      switch (day) {
        case "0": {
          dnum = 0;
          break;
        }
        case "1": {
          dnum = 1;
          break;
        }
        case "2": {
          dnum = 7;
          break;
        }
        case "3": {
          dnum = 30;
          break;
        }
        default: {
          break;
        }
      }
      let days = this.timeForMat(dnum);
      this.listDate.dateStrs = days;
      this.handleFilter();
    },
    timeForMat(count) {
      // 拼接时间
      const time1 = new Date();
      const time2 = new Date();
      if (count === 1) {
        time1.setTime(time1.getTime() - 24 * 60 * 60 * 1000);
      } else {
        if (count >= 0) {
          time1.setTime(time1.getTime());
        } else {
          if (count === -2) {
            time1.setTime(time1.getTime() + 24 * 60 * 60 * 1000 * 2);
          } else {
            time1.setTime(time1.getTime() + 24 * 60 * 60 * 1000);
          }
        }
      }

      const Y1 = time1.getFullYear();
      const M1 =
        time1.getMonth() + 1 > 9
          ? time1.getMonth() + 1
          : "0" + (time1.getMonth() + 1);
      const D1 = time1.getDate() > 9 ? time1.getDate() : "0" + time1.getDate();
      const timer1 = Y1 + "-" + M1 + "-" + D1;

      time2.setTime(time2.getTime() - 24 * 60 * 60 * 1000 * count);
      const Y2 = time2.getFullYear();
      const M2 =
        time2.getMonth() + 1 > 9
          ? time2.getMonth() + 1
          : "0" + (time2.getMonth() + 1);
      const D2 = time2.getDate() > 9 ? time2.getDate() : "0" + time2.getDate();
      const timer2 = Y2 + "-" + M2 + "-" + D2;
      return [timer2, timer1];
    },
    //火灾报警类型分布
    initChart1() {
      let dateStrs;
      if (this.listDate.dateStrs) {
        dateStrs = this.listDate.dateStrs.toString();
      }
      CountByType(
        Object.assign({}, this.listDate, this.params, { dateStrs: dateStrs })
      ).then(res => {
        if (!res.data || res.data.length === 0) {
          this.typeList = [];
          this.isnonetype = true;
        } else {
          this.isnonetype = false;
          this.typeList = res.data;
        }
        const type_arr = [];
        const dataStruct = [];
        for (let obj of this.typeList) {
          let alrmType = obj.alrmType;
          dataStruct.push({ value: obj.count, name: alrmType }); //重新组成对象
          type_arr.push(alrmType); //把所有的类型放在数组里
        }
        var chart1 = echarts.init(this.$refs.tableone);
        var option = {
          tooltip: {
            trigger: "axis",
            axisPointer: {
              type: "shadow"
            }
          },
          grid: {
            left: "3%",
            right: "4%",
            bottom: "3%",
            top: "3%",
            containLabel: true
          },
          xAxis: {
            color: "#fff",
            splitLine: {
              //去掉网格线
              show: true,
              lineStyle: {
                color: "rgba(80, 227, 194, 0.3)",
                type: "dashed"
              }
            },
            type: "value",
            boundaryGap: [0, 0.01],
            axisLabel: {
              //坐标轴刻度标签的相关设置
              show: true,
              textStyle: {
                color: "rgba(80, 227, 194, 0.3)",
                align: "right",
                fontSize: 12
              }
            },
            axisLine: {
              lineStyle: {
                color: "rgba(80, 227, 194, 0.3)"
              }
            },
            axisTick: {
              lineStyle: {
                color: "rgba(80, 227, 194, 0.3)"
              }
            }
          },
          yAxis: {
            type: "category", //轴的类型分两种 1.category（类别）2.value(值)
            data: type_arr,
            axisLabel: {
              show: true,
              textStyle: {
                color: "rgba(80, 227, 194, 0.7)",
                align: "right",
                fontSize: 12 /*文字大小*/
              }
            },
            axisLine: {
              lineStyle: {
                color: "rgba(80, 227, 194, 0.3)" //轴的颜色
              }
            },
            axisTick: {
              lineStyle: {
                color: "rgba(80, 227, 194, 0.3)" //轴上点的颜色
              }
            }
          },
          series: [
            {
              name: "",
              type: "bar",
              data: dataStruct,
              label: {
                normal: {
                  show: true, //显示数字
                  position: "right",
                  textStyle: {
                    fontSize: "14", //柱状上的显示的文字
                    color: "#2bdef5"
                  }
                }
              },
              barWidth: 30, //柱子宽度
              itemStyle: {
                normal: {
                  color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
                    { offset: 0, color: "rgba(80, 227, 194, 0)" },
                    { offset: 1, color: "#3DA996" }
                  ])
                }
              }
            }
          ]
        };
        chart1.setOption(option);
      });
    },
    //火灾报警时间分布
    initChart2() {
      let dateStrs;
      if (this.listDate.dateStrs) {
        dateStrs = this.listDate.dateStrs.toString();
      }
      CountByMonth(
        Object.assign({}, this.listDate, this.params, { dateStrs: dateStrs })
      ).then(res => {
        this.isnonetime = res.data.length === 0;
        let date_arr =
          res.data.dateList.length == 0
            ? [0, 0, 0, 0, 0, 0]
            : res.data.dateList;
        let callList =
          res.data.callList.length == 0
            ? [0, 0, 0, 0, 0, 0]
            : res.data.callList;
        let faultList =
          res.data.faultList.length == 0
            ? [0, 0, 0, 0, 0, 0]
            : res.data.faultList;

        var chart2 = echarts.init(this.$refs.tabletwo);

        var option = {
          grid: {
            left: 30,
            right: 80,
            bottom: 20,
            top: 20
          },
          tooltip: {
            trigger: "axis",
            axisPointer: {
              type: "cross",
              label: {
                backgroundColor: "#6a7985"
              }
            }
          },
          legend: {
            icon: "roundRect",
            orient: "vertical",
            textStyle: {
              color: "rgba(80, 227, 194, 0.7)"
            },
            itemHeight: 3,
            left: "right",
            top: "top",
            data: ["火警", "故障"]
          },
          xAxis: {
            type: "category",
            boundaryGap: false,
            data: date_arr,
            axisLine: {
              show: false,
              lineStyle: {
                color: "rgba(80, 227, 194, 0.3)"
              }
            }
          },
          yAxis: {
            type: "value",
            axisLine: {
              show: false,
              lineStyle: {
                color: "rgba(80, 227, 194, 0.3)"
              }
            },
            splitLine: {
              show: true,
              lineStyle: {
                color: "rgba(80, 227, 194, 0.3)"
              }
            }
          },
          dataZoom: [
            {
              type: "inside",
              start: 0,
              end: 100
            }
          ],
          series: [
            {
              type: "line",
              name: "火警",
              smooth: true,
              symbol: "circle",
              showAllSymbol: true,
              sampling: "average",
              itemStyle: {
                normal: {
                  color: "#ff0000"
                }
              },
              areaStyle: {
                normal: {
                  color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                    {
                      offset: 0,
                      color: "#E4393C"
                    },
                    {
                      offset: 1,
                      color: "rgba(0,0,0,0)"
                    }
                  ])
                }
              },
              data: callList
            },
            {
              type: "line",
              smooth: true,
              symbol: "circle",
              name: "故障",
              showAllSymbol: true,
              sampling: "average",
              itemStyle: {
                normal: {
                  color: "#ffff00"
                }
              },
              areaStyle: {
                normal: {
                  color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                    {
                      offset: 0,
                      color: "#F4D16C"
                    },
                    {
                      offset: 1,
                      color: "rgba(0,0,0,0)"
                    }
                  ])
                }
              },
              data: faultList
            }
          ]
        };
        chart2.setOption(option);
      });
    },
    //火灾报警建筑排名
    buildCount() {
      let dateStrs;
      if (this.listDate.dateStrs) {
        dateStrs = this.listDate.dateStrs.toString();
      }
      selectCountByBuild(
        Object.assign(
          {},
          this.listDate,
          this.params,
          { dateStrs: dateStrs },
          { alrmCategory: 1 }
        )
      ).then(res => {
        this.list = res.data;
      });
      selectCountByBuild(
        Object.assign(
          {},
          this.listDate,
          this.params,
          { dateStrs: dateStrs },
          { alrmCategory: 0 }
        )
      ).then(res => {
        this.slist = res.data;
      });
    },
    handleFilter() {
      this.initChart1();
      this.initChart2();
      this.handleDefectChart();
      this.buildCount();
    },
    toggleTime(value) {
      if (value == "1") {
        this.listDate.dateStrs = undefined;
        this.listDate.tag = "3";
      } else {
        this.listDate.tag = undefined;
      }
      this.radio = value;
    }
  }
};
</script>
<style lang="scss">
.anly-app-container {
  padding-top: 0;
  padding-left: 27px;
  padding-right: 27px;
  .filter-withline {
    width: 100%;
    border-bottom: 1px solid rgba(80, 227, 194, 0.7);
    .over-topline {
      border-bottom: 1px solid rgba(80, 227, 194, 0.7);
    }
  }
  .filter-wrap {
    display: flex;
    align-items: center;
    .filter-item {
      .el-radio-button__orig-radio:checked + .el-radio-button__inner {
        background: rgba(0, 0, 0, 0.3);
      }
      .el-radio-button__inner {
        // border-left: 1px solid rgba(80, 227, 194, 0.3) !important;
        border-radius: 0;
        font-weight: normal;
      }
      .el-radio-button:first-child .el-radio-button__inner {
        border-left: 0 !important;
      }
    }
  }
  .aside-withline {
    position: relative;
    height: 720px;
    background: linear-gradient(-140deg, transparent 2em, #0a1722 0);
    color: #2bdef5;
    .list {
      padding-top: 12px;
      & > p {
        padding-left: 29px;
        margin: 0;
        i {
          color: rgba(80, 227, 194, 0.5);
        }
      }
    }
  }
  .handle-defect {
    width: 100%;
    height: 200px;
  }
  .table_one {
    width: 100%;
  }
  .table_two,
  .table_three {
    width: 100%;
  }
  .table_two {
    height: 209px;
  }
  .anly-main {
    .anly-main-wrap {
      min-height: 720px;
      background: linear-gradient(-140deg, transparent 2em, #0a1722 0);
      position: relative;
      .filter-result-wraplist {
        display: flex;
        padding: 40px 20px 20px 22px;
        & > div {
          flex: 1;
        }
        .filter-result-left {
          margin-right: 50px;
        }
      }
    }
    .anly-main-chart {
      margin: 0 20px;
    }
    .list {
      color: #2bdef5;
      & > p {
        i {
          color: rgba(80, 227, 194, 0.5);
        }
      }
    }
  }
  .el-aside {
    height: 800px;
    padding: 22px 0;
  }
  .el-date-editor--daterange.el-input__inner {
    width: 265px;
    margin-left: 10px;
  }
}
</style>
<style lang="scss" scoped>
.statisticAnly {
  background: #1a2956;
  height: calc(100vh - 4px);
  width: 100%;
}

.exceptionRecord_main_left {
  flex: 1;
  overflow: hidden;
  height: 654px;
  margin-right: 20px;
  .exceptionRecord_main_left_table {
    width: calc(100vw - 800px);
    height: 459px;
    overflow: auto;

    .title {
      color: #09deb2;
      display: flex;
      padding: 10px 0;
    }
  }
}

.borderContent {
  width: 450px;
  height: auto;
  // position: absolute;
  // right: 44px;
  // top: 130px;
  .borderContent_type {
    width: 450px;
    .border_message {
      width: 100%;
      display: flex;
      justify-content: space-between;
      flex-wrap: wrap;
      padding: 20px;
      .border_message_num {
        width: 180px;
        height: 87px;
      }
    }
  }

  .borderContent_bottom {
    width: 500px;
    margin-top: 20px;
    .border_message {
      width: 422px;
      height: 187px;
    }
    .border_message2 {
      width: 480px;
      height: 150px;
      margin-top: 20px;
      .borderType_title {
        height: 20px;
        line-height: 20px;
        font-size: 18px;
        color: #afdaf1;
        // font-weight: bold;
      }
    }
  }
}
</style>
